<template>
	<div id="xiaoshi-box">
		<div id="xianshi-left">
			<ul class="left-one">
				<li><h3 style="color: red;margin-right: 5px;">限时抢购</h3></li>
				<li>
					<span style="font-size: 12px;">距结束</span>
					<span style="font-size: 12px;background:#D6DCF1;">08:</span>
					<span style="font-size: 12px;background:#D6DCF1;">06:</span>
					<span style="font-size: 12px;background:#D6DCF1;">39</span>
				</li>
			</ul>
			<ul class="left-two">
				<li class="left-two-img">
					<img src="../../../public/img/beijing_bandaojiudian.jpg"/>
				</li>
				<li class="left-two-p">
					<p style="font-size: 13px;">[周末不涨价]北京二环北京半岛酒店豪华单间+免费早餐+机场接送</p>
				</li>
			</ul>
			<ul class="left-three">
				<li style="margin-top: 12px;margin-left: 5px;">
					<strong style="font-size: 13px">限量份</strong>
					<span style="font-size: 10px">1000份</span>
				</li>
				<li class="li-2">
					<span style="font-size: 12px;color: red;">￥</span>
					<span style="font-size: 18px;color: red;">299</span>
					<span style="font-size: 10px;">起</span>
				</li>
			</ul>
		</div>
		<div id="xianshi-right">
			<div id="right1">
				<ul>
					<li class="one">
						<h4>快乐度假</h4>
						<span>亲子旅游记</span>
					</li>
					<li class="two">
						<img src="../../../public/img/dujia.jpg"/>
					</li>
				</ul>
			</div>
			<div id="right2">
				<ul>
					<li class="one">
						<h4>温泉爆款</h4>
						<span>又到一年温泉季</span>
					</li>
					<li class="two">
						<img src="../../../public/img/wenquan01.jpg"/>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'xianshi'
	}
</script>

<style>
	#xiaoshi-box{width:100%;height: 160px;display: flex;justify-content: space-around;}
	#xianshi-left,#xianshi-right{width: 49%;height: 160px;background: white;}
	#xianshi-right div{width: 100%;height: 78px;}
	#xianshi-right ul{width: 100%;height: 78px;display: flex;}
	#xianshi-right ul li{width: 50%;height: 78px;}
	#xianshi-right ul .one{margin-top: 20px;}
	#xianshi-right ul h4{margin-bottom: 7px;margin-left: 10px;}
	#xianshi-right ul li img{width: 88%;height: 78px;border-radius: 50%;}
	#xianshi-right #right2{margin-top: 4px;}
	#xianshi-right ul li span{font-size: 12px;margin-left: 3px;}
	
	#xianshi-left .left-one{width: 100%;height: 40px;display: flex;padding-top: 5px;padding-left: 5px;}
	#xianshi-left .left-two{width: 100%;height: 80px;display: flex;}
	#xianshi-left .left-two-p{width: 60%;height: 80px;}
	#xianshi-left .left-two-img{width: 40%;height: 80px;border-radius: 3px;overflow: hidden;margin: 0px 10px;box-shadow: 2px 2px 3px #CCCCCC;}
	#xianshi-left .left-two img{width: 100%;height: 80px;}
	#xianshi-left .left-three{position: relative;}
	#xianshi-left .left-three .li-2{position: absolute;bottom: 3px;right: 10px;}
</style>